<template>
	<view class="new-users copy-data" :style="colorStyle">

		<div class="boxbg"></div>
		<view class="pd_lf--40">
			<view class="page_title">究极生酮的健康报告</view>
			<view class="page_subtitle">{{ detail.add_time }}</view>
			<view class="page_card">
				<view class="card_title">当前体重（公斤）</view>
				<view class="card_number">{{ detail.weight }}</view>
				<view class="card_line">
					<view class="line_number number_one">18.5</view>
					<view class="line_number number_two">24.9</view>
					<view class="line_number number_three">29.9</view>
					<view class="line_number number_four">37.4</view>
					<image src="./static/circle.png" class="line_icon" :style="{left: left}" />
					<view class="line_item">
						<view class="line one"></view>
						<view class="line_text">偏瘦</view>
					</view>
					<view class="line_item">
						<view class="line two"></view>
						<view class="line_text">标准</view>
					</view>
					<view class="line_item">
						<view class="line three"></view>
						<view class="line_text">偏胖</view>
					</view>
					<view class="line_item">
						<view class="line four"></view>
						<view class="line_text">肥胖</view>
					</view>
					<view class="line_item ">
						<view class="line five"></view>
						<view class="line_text">重度</view>
					</view>
				</view>
			</view>
			<view class="page_table">
				<view class="table_header">
					<view class="header_line"></view>
					<view class="header_title">更多数据</view>
				</view>
				<view class="table_item">
					<view class="table_label">
						<image src="./static/weight.png" class="label_icon" />
						<view class="label_text">体重</view>
					</view>
					<view class="table_right">
						<view class="table_text">{{ detail.weight }}<text>公斤</text></view>
						<image src="./static/right_arrow.png" class="right_icon" />
					</view>
				</view>
				<view class="table_item">
					<view class="table_label">
						<image src="./static/bmi.png" class="label_icon" />
						<view class="label_text">BMI</view>
					</view>
					<view class="table_right">
						<view class="table_text">{{ detail.bmi }}</view>
						<image src="./static/right_arrow.png" class="right_icon" />
					</view>
				</view>
				<view class="table_item">
					<view class="table_label">
						<image src="./static/fat_rate.png" class="label_icon" />
						<view class="label_text">体脂率</view>
					</view>
					<view class="table_right">
						<view class="table_text">{{ detail.tizhi }}<text>%</text></view>
						<image src="./static/right_arrow.png" class="right_icon" />
					</view>
				</view>
				<view class="table_item">
					<view class="table_label">
						<image src="./static/fat_weight.png" class="label_icon" />
						<view class="label_text">脂肪重量</view>
					</view>
					<view class="table_right">
						<view class="table_text">{{ detail.zfzl }}<text>公斤</text></view>
						<image src="./static/right_arrow.png" class="right_icon" />
					</view>
				</view>
				<view class="table_item">
					<view class="table_label">
						<image src="./static/bone_quality.png" class="label_icon" />
						<view class="label_text">骨骼质量</view>
					</view>
					<view class="table_right">
						<view class="table_text">{{ detail.guge }}<text>公斤</text></view>
						<image src="./static/right_arrow.png" class="right_icon" />
					</view>
				</view>
				<view class="table_item">
					<view class="table_label">
						<image src="./static/muscle_rate.png" class="label_icon" />
						<view class="label_text">肌肉率</view>
					</view>
					<view class="table_right">
						<view class="table_text">{{ detail.jirou }}<text>%</text></view>
						<image src="./static/right_arrow.png" class="right_icon" />
					</view>
				</view>
				<view class="table_item">
					<view class="table_label">
						<image src="./static/muscle_weight.png" class="label_icon" />
						<view class="label_text">肌肉重量</view>
					</view>
					<view class="table_right">
						<view class="table_text">{{ detail.jrzl }}<text>公斤</text></view>
						<image src="./static/right_arrow.png" class="right_icon" />
					</view>
				</view>
				<view class="table_item">
					<view class="table_label">
						<image src="./static/visceral_fat.png" class="label_icon" />
						<view class="label_text">内脏脂肪</view>
					</view>
					<view class="table_right">
						<view class="table_text">{{ detail.nzzf }}<text>级</text></view>
						<image src="./static/right_arrow.png" class="right_icon" />
					</view>
				</view>
				<view class="table_item">
					<view class="table_label">
						<image src="./static/water.png" class="label_icon" />
						<view class="label_text">水份</view>
					</view>
					<view class="table_right">
						<view class="table_text">{{ detail.shuifen }}<text>%</text></view>
						<image src="./static/right_arrow.png" class="right_icon" />
					</view>
				</view>
				<view class="table_item">
					<view class="table_label">
						<image src="./static/water_rate.png" class="label_icon" />
						<view class="label_text">水含量</view>
					</view>
					<view class="table_right">
						<view class="table_text">{{ detail.shl }}<text>公斤</text></view>
						<image src="./static/right_arrow.png" class="right_icon" />
					</view>
				</view>
				<view class="table_item">
					<view class="table_label">
						<image src="./static/protein.png" class="label_icon" />
						<view class="label_text">蛋白质</view>
					</view>
					<view class="table_right">
						<view class="table_text">{{ detail.dbz }}<text>%</text></view>
						<image src="./static/right_arrow.png" class="right_icon" />
					</view>
				</view>
				<view class="table_item">
					<view class="table_label">
						<image src="./static/lean_body.png" class="label_icon" />
						<view class="label_text">去脂体重</view>
					</view>
					<view class="table_right">
						<view class="table_text">{{ detail.qztz }}<text>公斤</text></view>
						<image src="./static/right_arrow.png" class="right_icon" />
					</view>
				</view>
				<view class="table_item">
					<view class="table_label">
						<image src="./static/age.png" class="label_icon" />
						<view class="label_text">身体年龄</view>
					</view>
					<view class="table_right">
						<view class="table_text">{{ detail.stnl }}<text>岁</text></view>
						<image src="./static/right_arrow.png" class="right_icon" />
					</view>
				</view>
			</view>
		</view>
		<view class="history_btn" @click="handleHistory">查看历史数据</view>
	
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	const app = getApp();
	import colors from '@/mixins/color';
	import {getDetail,addDetail} from "@/api/bmi.js";
	import moment from "@/utils/moment.min.js"
	import {
		mapState,
		mapGetters
	} from "vuex";
	export default {
		name: "result",
		data() {
			return {
				// #ifdef H5 || MP
				pageHeight: '100%',
				routineContact: 0,
				// #endif
				sysHeight: sysHeight,
				detail: {},
				left:''
			}
		},
		mixins: [colors],
		onLoad(options) {
			const {weight,dianzu,id,message} = options
			const that = this;
			console.log('onLoad',weight,dianzu,message)
			const data = {weight,dianzu,id,message}
			if (!id) {
				addDetail(data).then(res=>{
					this.formatData(res.data)
				})
			}else{
				getDetail(id,{'weight':weight,'dianzu':dianzu}).then(res=>{
						this.formatData(res.data)
				})
			}
			
		},
		onReady() {

		},
		onShow: function() {

		},
		methods: {
			formatData(data){
				  data.addTime = moment(data.add_time).format('YYYY-MM-DD HH:mm:ss')
				this.detail = data
				const bmi = data.bmi
				console.log('ne',new Date(data.add_time))
				let left;
				if (bmi < 18.5) {
										left = bmi / 18.5 * 566 / 5 - 20
				} else if (bmi < 24.9) {
										left = (bmi - 18.5) / (24.9 - 18.5) * 566 / 5 + (566 / 5 * 1) - 20
				} else if (bmi < 29.9) {
										left = (bmi - 24.9) / (29.9 - 24.9) * 566 / 5 + (566 / 5 * 2) - 20
				} else if (bmi < 37.4) {
										left = (bmi - 29.9) / (37.4 - 29.9) * 566 / 5 + (566 / 5 * 3) - 20
				} else if (bmi < 45) {
										left = (bmi - 37.4) / (45 - 37.4) * 566 / 5 + (566 / 5 * 4) - 20
				} else {
										left = 566 - 20
				}
				this.left = `${left}rpx`
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleHistory() {
				// wx.switchTab({
				//   url: '/pages/weight/index',
				// })
				uni.navigateTo({
					url: '/pages/weight/index',
					fail:function(e){
						console.log('fail',e)
					}
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	
	.boxbg {
		background-size: 100% auto;
		background-color: var(--view-theme);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 250rpx;
    z-index: -1;
	}

	.new-users {
		padding-bottom: 60rpx;
	}

	.pd_lf--40 {
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.page_title {
		font-size: 46rpx;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
		line-height: 50rpx;
		padding: 20rpx 0 0;
	}

	.page_subtitle {
		font-size: 24rpx;
		line-height: 32rpx;
		color: #ffffff;
		text-align: center;
		margin-top: 20rpx;
	}

	.page_card {
		margin-top: 30rpx;
		width: 100%;
		padding: 50rpx 52rpx 68rpx;
		background: #ffffff;
		border-radius: 24rpx;
		box-sizing: border-box;
		box-shadow: 0px 1px 46px 0px rgba(136, 142, 163, 0.33);
	}

	.card_title {
		font-size: 34rpx;
		font-weight: 600;
		line-height: 40rpx;
		color: #5C637D;
		font-weight: 600;
	}

	.card_number {
		margin-top: 20rpx;
		font-size: 110rpx;
		font-weight: 600;
		line-height: 1;
		color: #374BA2;
	}

	.card_line {
		margin-top: 116rpx;
		display: flex;
		position: relative;
		width: 566rpx;
	}

	.line_number {
		position: absolute;
		top: -50rpx;
		font-size: 26rpx;
		line-height: 38rpx;
		color: #9296A3;
	}

	.number_one {
		left: 82rpx;
	}

	.number_two {
		left: 196rpx;
	}

	.number_three {
		left: 308rpx;
	}

	.number_four {
		left: 418rpx;
	}

	.line_item {
		flex: 1;
	}

	.line_item+.line_item {
		margin-left: 4rpx;
	}

	.line {
		width: 100%;
		height: 10rpx;
	}

	.line_icon {
		position: absolute;
		top: -16rpx;
		width: 40rpx;
		height: 40rpx;
		display: block;
	}


	.line_text {
		font-size: 24rpx;
		color: #9296A3;
		line-height: 32rpx;
		margin-top: 16rpx;
		text-align: center;
	}

	.one {
		background-color: #80BBFD;
		border-radius: 6rpx 0 0 6rpx;
	}

	.two {
		background-color: #81CF7F;
	}

	.three {
		background-color: #F5C533;
	}

	.four {
		background-color: #F08E53;
	}

	.five {
		background-color: #E30C2B;
		border-radius: 0 6rpx 6rpx 0;
	}

	.page_table {
		margin-top: 30rpx;
		background: #ffffff;
		border-radius: 24rpx;
		padding-bottom: 46rpx;
		box-sizing: border-box;
		box-shadow: 0px 1px 46px 0px rgba(136, 142, 163, 0.33);
	}

	.table_header {
		height: 120rpx;
		display: flex;
		align-items: center;
	}

	.header_line {
		background-color: #6586F9;
		height: 28rpx;
		width: 8rpx;
		border-radius: 4rpx;
		margin-right: 28rpx;
	}

	.header_text {
		color: #222222;
		font-size: 28rpx;
		line-height: 1;
		font-weight: 600;
	}

	.table_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 120rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
	}

	.table_item:nth-of-type(2n) {
		background-color: #FAFAFA;
	}

	.table_label,
	.table_right {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.label_icon {
		width: 50rpx;
		height: 50rpx;
		display: block;
		margin-right: 12rpx;
	}

	.label_text {
		font-size: 36rpx;
		line-height: 50rpx;
		color: #3A3C44;
	}

	.table_text {
		color: #3A3C44;
		font-size: 42rpx;
		line-height: 50rpx;
		margin-right: 8rpx;
	}

	.table_text text {
		color: #6A6E7A;
		font-size: 26rpx;
	}

	.right_icon {
		width: 12rpx;
		height: 22rpx;
		display: block;
	}

	.history_btn {
		margin: 60rpx auto 0;
		width: 428rpx;
		height: 98rpx;
		border: 1rpx solid #FF5790;
		color: #FF5790;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
